<template>
  <div>
    <el-card>
      <el-tabs v-model="queryData.tab">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="审核中" name="checking"></el-tab-pane>
        <el-tab-pane label="出售中" name="saling"></el-tab-pane>
        <el-tab-pane label="已下架" name="off"></el-tab-pane>
        <el-tab-pane label="库存预警" name="min_stock"></el-tab-pane>
        <el-tab-pane label="回收站" name="delete"></el-tab-pane>
      </el-tabs>
      <el-row :gutter="30">
        <el-col :span="10">
          <el-input
            placeholder="请输入商品名称"
            clearable
            v-model="queryData.title"
            @clear="getGoodsList"
          >
            <template #prepend>
              <el-select
                v-model="queryData.category_id"
                clearable
                placeholder="请选择商品分类"
                style="width: 145px"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in goodsCate"
                  :key="item.id"
                />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" @click="getGoodList" />
            </template>
          </el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-col>
          <el-button type="primary" @click="addGoods">新增商品</el-button>
          <el-button type="danger">批量删除</el-button>
          <el-button plain size="small">上架</el-button>
          <el-button plain size="small">下架</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="商品信息">
          <template #default="scope">
            <div class="goodsTitle">
              <el-avatar
                shape="square"
                fit="cover"
                :src="scope.row.cover"
              ></el-avatar>
              <h1></h1>
              <span style="color: red"></span>
              <span>{{scope.row.category.name}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品状态">
          <template #default="scope">
            <div>
              <el-tag type="warning" v-if="scope.row.status ==1">上架</el-tag>
              <el-tag type="info" v-else>下架</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template #default="scope">
            <!-- 
                            ischeck==0表示未审核
                            1表示通过
                            2表示拒绝
                                                                                                             -->
            <div >
              <el-tag type="success" class="tag2" v-if="scope.row.ischeck == 1">通过</el-tag>
              <el-tag type="info" v-else>拒绝</el-tag>
            </div>
           
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" />
        <el-table-column label="操作" width="500px">
          <template #default="scope">
            <div v-if="queryData.tab !== 'delete'" class="editClass">
              <el-button
                type="primary"
                :icon="Edit"
                size="small"
                @click="editGoods(scope.row)"
              />
              <el-button
                class="btnClass"
                @click="oppenSetBanner(scope.row)"
                :loading="scope.row.isLoading"
                >设置轮播图</el-button
              >
              <el-button
                class="btnClass1"
                @click="oppenGoodsInfoDialog(scope.row)"
                :loading="scope.row.goodsInfoLoading"
                >设置商品详情</el-button
              >

              <el-button
                class="btnClass2"
                @click="oppenGoodsSku(scope.row)"
                :loading="scope.row.goodsSkuLoading"
                >设置商品规格</el-button
              >
            </div>
            <div v-else>暂无操作</div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增编辑弹框 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="title"
      width="500"
      @close="handleClose"
    >
      <el-form :model="form" ref="formRef">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="商品分类" :label-width="formLabelWidth">
          <el-select v-model="form.category_id" placeholder="请选择商品分类">
            <el-option
              v-for="item in goodsCate"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品头像" :label-width="formLabelWidth">
          <select-img v-model="form.cover"></select-img>
        </el-form-item>
        <el-form-item label="商品单位" :label-width="formLabelWidth">
          <el-input v-model="form.unit" autocomplete="off" />
        </el-form-item>
        <el-form-item label="总库存" :label-width="formLabelWidth">
          <el-input-number
            controls-position="right"
            v-model="form.stock"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="库存预警" :label-width="formLabelWidth">
          <el-input-number
            controls-position="right"
            v-model="form.min_stock"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="原价格" :label-width="formLabelWidth">
          <el-input v-model="form.min_oprice" type="number">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="活动价格" :label-width="formLabelWidth">
          <el-input v-model="form.min_price" type="number">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <el-input v-model="form.desc" type="textarea"> </el-input>
        </el-form-item>
        <el-form-item label="是否显示库存" :label-width="formLabelWidth">
          <el-radio-group v-model="form.stock_display">
            <el-radio :label="1" border>是</el-radio>
            <el-radio :label="0" border>否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否上架" :label-width="formLabelWidth">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitOk"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 设置轮播图 -->
    <GoodsBanner ref="goodsBannerRef"></GoodsBanner>
    <!-- 设置详情 -->
    <editGoodsInfo ref="editGoodsRef"></editGoodsInfo>
    <!-- 设置商品规格 -->
    <GoodsSku ref="goodsRef"></GoodsSku>
  </div>
</template>

<script setup>
import { Search, Edit } from "@element-plus/icons-vue";
import { ref } from "vue";
import {
  getGoodsListFn,
  getGoodsCateFn,
  addGoodsFn,
  editGoodsFn,
  setGoodsBanner,
  editStuFn
} from "@/api/goods.js";
import { ElMessage, ElMessageBox } from "element-plus";
import GoodsBanner from "@/components/GoodsBanner.vue";
import editGoodsInfo from "@/components/editGoodsInfo.vue";
import GoodsSku from '@/components/GoodsSku.vue'
const queryData = ref({
  title: "",
  category_id: "",
  tab: "all",
  limit: 10,
});
const page = ref(1);
const goodsCate = ref([]);
const tableData = ref([]);

// 获取商品列表
const getGoodList = async () => {
  const res = await getGoodsListFn(page.value, queryData.value);
  if (res.msg && res.msg !== "ok") return;
  tableData.value = res.data.list;
};
getGoodList();
// 接收商品分类
const getGoodsCate = async () => {
  const res = await getGoodsCateFn();
  if (res.msg && res.msg !== "ok") return;
  goodsCate.value = res.data;
};
getGoodsCate();

// 新增/编辑弹框选项
const dialogFormVisible = ref(false);
const title = ref("新增");
const form = ref({
  title: "",
  category_id: "",
  cover: "",
  unit: "",
  stock: "",
  min_stock: "",
  min_oprice: "",
  min_price: "",
  desc: "",
  stock_display: "",
  status: "",
});
const formRef = ref(null);
const formLabelWidth = "120px";
const addGoods = () => {
  dialogFormVisible.value = true;
};
// 新增/编辑确认
const submitOk = async () => {
  if (title.value == "新增") {
    const res = await addGoodsFn(form.value);
    if (res.msg && res.msg !== "ok") return;
    ElMessage.success("新增成功");
  } else {
    const res = await editGoodsFn(goodsId.value,form.value);
    if (res.msg && res.msg !== "ok") return;
    ElMessage.success("编辑成功");
  }

  dialogFormVisible.value = false;
  getGoodList();
};
const goodsId = ref("");
const editGoods = (row) => {
  title.value = "编辑";
  goodsId.value = row.id;
  form.value = row;
  dialogFormVisible.value = true
};
// 轮播图
const goodsBannerRef = ref(null)
const oppenSetBanner = (row) => {
    goodsBannerRef.value.openDialog(row)
}
// 设置详情
const editGoodsRef = ref(null)
const oppenGoodsInfoDialog = (row) =>{
    editGoodsRef.value.openDialog(row)
}
// 设置商品规格
const goodsRef = ref(null)
const oppenGoodsSku = (row) => {
  goodsRef.value.openDialog(row)
}
const handleClose = () => {
  formRef.value.resetFields();
};
</script>

<style lang="less" scoped>
.el-card,
.el-table {
  margin-top: 20px;
}
.tag2 {
  margin-right: 10px;
}
.goodsTitle {
  .el-avatar {
    margin-right: 10px;
    float: left;
  }
  h1 {
    font-size: 14px;
    margin: 0;
    padding: 0px;
  }
  span {
    display: block;
  }
}
</style>
